<template>
<div style="width: 100%;height: 100%;" class="vo">
  <div class="masker" v-if="!type && status==1" v-loading="1"></div>
  <div class="masker error" v-if="!type && status==3">
    <div class="msg" v-html="errMsg"></div>
    <div class="retry" @click="retry">
      <i class="el-icon-refresh"></i>
    </div>
  </div>
  <div class="refresh2" @click="refresh()">⟲</div>
  <video ref="video" :class="'_' + status" v-show="!type"></video>
  <iframe v-if="type" :src="('/datav/videocamera/index.html?code=' + urlSource) | productEnv" frameborder="0" scrolling="no"></iframe>
</div>
</template>

<script>
import Hls from 'hls.js';
export default {
  name: "StyleBar",
  props: {
    urlSource: {
      type: String
    }
  },
  data () {
    this.hls = new Hls();
    return {
      type: 0,
      status: 0,
      errMsg: ''
    };
  },
  methods: {
    refresh: function () {
      this.retry(this.urlSource);
    },
    retry: function (souce, isErr) {
      var vm = this;
      !isErr && (vm.status = 0);
      vm.hls.stopLoad();
      vm.hls.destroy();
      clearTimeout(vm.retryTimeout);
      vm.retryTimeout = setTimeout(() => {
        vm.hls = new Hls();
        if (souce.length < 30) {
          // 用iframe
          vm.type = 1;
        } else {
          vm.type = 0;
          vm.hls.on(Hls.Events.MANIFEST_PARSED, function () {
            vm.dom.play();
            vm.status = 2;
          });
          // eslint-disable-next-line
          vm.hls.on(Hls.Events.ERROR, function (err, msg) {
            if (msg.type != 'mediaError') {
              vm.status = 3;
              vm.errMsg = '无信号<br>正在重连..';
              clearTimeout(vm.retryTimeout);
              vm.retryTimeout = setTimeout(() => { vm.retry(souce, true); }, 1000);
            }
          });
          vm.hls.config.manifestLoadingTimeOut = 30000;
          !isErr && (vm.status = 1); // 等待
          vm.hls.loadSource(souce || vm.urlSource);
          vm.hls.attachMedia(vm.dom);
        }
      }, 800);
    }
  },
  watch: {
    urlSource: function (n) {
      if (n) {
        this.retry(n);
      }
    }
  },
  mounted: function () {
    var vm = this;
    vm.dom = vm.$refs.video;
    if (vm.urlSource) {
      if (vm.urlSource.length < 30) {
        // 用iframe
        vm.type = 1;
      } else {
        vm.hls.config.manifestLoadingTimeOut = 60000;
        vm.status = 1;
        vm.hls.loadSource(vm.urlSource);
        vm.hls.attachMedia(vm.dom);
      }
    }
    vm.hls.on(Hls.Events.MANIFEST_PARSED, function () {
      vm.dom.play();
      vm.status = 2;
    });
  },
  destroyed: function () {
    this.status = 0;
    this.urlSource && this.hls.stopLoad();
    clearTimeout(this.retryTimeout);
  }
};
</script>
<style lang="scss" scoped>
video {
  width: 100%;
  height: 100%;
}
.masker {
  position: absolute;
  width: 100%;
  height: 100%;
  /deep/ .el-loading-mask {
    background: none;
    .el-loading-spinner {zoom:2}
  }
}
.error {
  background: #000;
  color: wheat;
  display: flex;
  font-size: 54px;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  .msg {background: #7d6e6e; text-align: center;}
  .retry {cursor: pointer;    display: none;}
  i {
    color: #fff;
    height: 50%;
    font-size: 90px;

  }
}
._1 {
  background: #000 !important;
}
._2 {
  background: #000 !important;
}
iframe {
  width: 100%;
  height: 100%;
  background: #000;
}
.vo .refresh2 {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #000;
  font-size: 24px;
  width: 30px;
  height: 30px;
  color: cyan;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.vo:hover .refresh2 {
  display: block;
}
</style>
